<template>
	<div class="kugou-content">
		<!-- banner图 -->
		<img v-if="backgroundImg==''" src="../../static/images/background.png" alt class="bg-banner" />
		<img v-else-if="backgroundImg!=''" :src="backgroundImg" alt class="bg-banner" />
    <!-- 返回 -->
    <img :src="backButtonImg" class="nav left" @click="back"/>
    <!-- 活动规则 -->
    <img :src="ruleButtonImg" class="nav right" @click="showRule"/>
    <div class="list" :style="{backgroundImage:`url(${myPrizeBg})`}">
      <div class="items">
        <!-- <div class="empty">您还没有任何奖品哦~</div> -->
        <div class="menu">
          <div class="menu-left">奖品名称</div>
          <div class="menu-right">领取状态</div>
        </div>
        <div class="datas">
          <div class="data" v-for="(item,i) in pondList" :key=i>
            <div class="data-left">
              <img class="data-left-img" :src="item.pondInfo.image_url"></img>
            </div>
            <div class="data-center">
              <div class="title">{{item.pondInfo.name}}</div>
              <div class="time">兑换截止时间：{{endAt}}</div>
            </div>
            <div class="data-right">
              <div class="able-button" @click="receive(item.type,item.id,i)" v-if="item.status==0">立即领取</div>
              <div class="unable-button" v-else-if="item.status==1">已领取</div> 
            </div>
          </div>
        </div>
      </div>
    </div>
	<u-modal v-model="showRuleLabel" :title-style="{color: 'black'}" title=活动规则 :show-title="true">
				<view class="slot-content" style="padding: 0rpx 0.2rpx;">
					<rich-text :nodes="ruleContent"></rich-text>
				</view>
			</u-modal>
	</div>
</template>
<script>
	import {
		uploadPageInfo,
	} from '@/util/collection.js';
export default {
	name: "myPrize",
  components:{

  },
	data() {
		return {
			activityId:0,
			showRuleLabel:false,
			loading: false,
			finished: false,
			pondList:[],
			ruleContent: '',
			backgroundImg: '',
			backButtonImg: 'static/images/back.png',
			ruleButtonImg: 'static/images/rule.png',
			myPrizeBg: '',
			title: '',
			endAt: ''
		};
	},
	created() {
		var that = this;
		//获取之前保存的游戏ID
		uni.getStorage({
		    key: 'taibao_luckyDraw_data'+that.activityId,
		    success: function (res) {
				console.log(res);
				that.activityId = res.data.activityId;
				that.backgroundImg = res.data.backgroundImg;
				that.ruleContent = res.data.ruleContent;
				that.backButtonImg = res.data.backButtonImg;
				that.myPrizeBg = res.data.myPrizeBg;
				that.ruleButtonImg = res.data.ruleButtonImg;
				that.title = res.data.title;
				that.endAt = res.data.endAt;
				that.endAt = that.endAt.split(' ')[0];
		    }
		});
	
		
	},
	onLoad(option) {
		//获取我的中奖记录
		console.log('option:');
		console.log(option);
		this.activityId = option.activityId;
		
		var that = this;
		this.$request({
			url: that.$api.myPrize.getUserAwardList,
			method: 'get',
			data: {
				activityid: that.activityId
			},
		}).then(info => {
			console.log(info);
			var result = info.data;
			if(info.code == 400){
				uni.showToast({
					title: result.msg,
					icon: 'none'
				})
				return false;
			}
			
			var pondLogs = result.pondLogs;
			this.pondList = pondLogs;
		}).catch(error => {
			console.log(error)
		})

	},
	onShow(){
		uploadPageInfo(this.activityId,this.$api.collection.saveAddonsInfo,'pages/myPrize/myPrize');
		var that = this;
		uni.setNavigationBarTitle({
			    title: that.title
			});
	},
	methods: {
		showRule(){
			this.showRuleLabel = true;
		},
		back() {
			//跳转到抽奖页面
			uni.navigateTo({
				url: '/pages/luckyDraw/luckyDraw?id='+this.activityId
			});
		},
		
    receive(type,logid,index){
		//type：1.红包2.优惠卷3.积分4.实物.5.无
		if(type == 2){
			//领取奖品
			var that = this;
			this.$request({
				url: that.$api.myPrize.getAward,
				method: 'get',
				data: {
					activityid: that.activityId,
					pondLogsid:logid
				},
			}).then(info => {
				
				if(info.code == 203){
					uni.showToast({
						title: info.msg,
						icon: 'none'
					})
					return false;
				}else if(info.code == 200){
					that.pondList[index]['status'] = 1;
					uni.showToast({
						title: info.msg,
						icon: 'none'
					});
				}
			}).catch(error => {
				console.log(error)
			})
		}else if(type == 4){
			uni.navigateTo({
				url: '/pages/address/address?logid='+logid+'&activityId='+this.activityId,
			});
		}
    }
	}
};
</script>
<style lang="scss" scoped>

.kugou-content {
  width: 100%;
  // background-color: #ffd7b3;
  position: relative;
}
// 顶部图片
.bg-banner {
  width: 100%;
  height: 100%;
}
.nav {
  width: 130rpx;
  height: 100rpx;
  top: 55rpx;
  position: absolute;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.list{
  width: 100%;
  height: 63%;
  position: absolute;
  top: 430rpx;
  background: url("../../static/images/myPricebg.png") top center no-repeat;
  background-size: 680rpx 800rpx;
}
.items{
  width: 625rpx;
  height: 700rpx;
  position: absolute;
  left: 64rpx;
  top: 100rpx;
}
.menu{
  font-size: 30rpx;
  color: #fc6a39;
  text-align: center;
  line-height: 60rpx;
  font-weight: 800;
  display: flex;
  flex-direction: row;
}
.menu div{
  width: 50%;
}
.datas{
  width: 100%;
  height: 600rpx;
  overflow:scroll;
}
.data{
  border-bottom: 1px dotted #b2b2b2;
  padding: 20rpx 0;
  display: flex;
  flex-direction: row;
}
.data-left{
  width: 120rpx;
  height: 120rpx;
  background-color: #fff0a3;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-left-img{
  width: 120rpx;
  height: 120rpx;
}
.data-center{
  font-size: 24rpx;
  padding-top: 2rpx;
  padding-bottom: 1rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title{
  font-weight: 800;
}
.data-right{
  width: 150rpx;
  margin-left: 10rpx;
  display: flex;
  align-items:center;
  justify-content: center;
}
.able-button{
  background-color: #ff7425;
  color: #ffffff;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 50rpx;
  width: 200rpx;
  text-align: center;
  border-radius: 15rpx;
}
.unable-button{
  background-color: #cec9c5;
  color: #ffffff;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 50rpx;
  width: 200rpx;
  text-align: center;
  border-radius: 15rpx;
}
.empty{
  font-size: 32rpx;
  text-align: center;
  margin-top: 10rpx;
}
</style>
